<template>
  <div class="right-container bg-color-white">
    <div style="padding-left: 50px">
      <h5 class="order-title">我的订单</h5>
      <el-tabs v-model="data.activeTabName" class="order-tabs" @tab-click="clickTabHandle">
        <el-tab-pane label="全部订单" name="all"></el-tab-pane>
        <el-tab-pane label="待付款" name="unpay"></el-tab-pane>
        <el-tab-pane label="已付款" name="paid"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="line-style"></div>
    <div class="flex-all-center table-header">
      <span style="min-width: 550px">订单详情</span>
      <span style="width: 120px">价格</span>
      <span style="width: 120px">状态</span>
      <span style="width: 120px">操作</span>
    </div>
    <div v-for="item in data.orderList" class="order-list-container">
      <div class="flex-start-center order-info-container">
        <span>{{ item.orderCreateTime }}</span>
        <span style="padding-left: 25px;">{{ '订单号：' }}
              <span style="color: #171920">{{ item.orderCode }}</span>
            </span>
        <span style="padding-left: 25px">{{ '订单金额' }}
              <span style="color: #171920">{{ '￥' + item.orderTotalPrice }}</span>
            </span>
      </div>
      <div class="flex-start-center">
        <div class="flex-column-center">
          <div v-for="(unit,index) in item.orderItemList" :style="(item.orderItemList.length > 1 && (item.orderItemList.length-2) == index)? 'border-bottom: 1px solid #efeff0' : ''"
               style="width: 550px;">
            <div class="flex-column flex-top course-info-container">
              <span class="course-type-content">{{ unit.goodCategoryName }}</span>
              <span class="course-name-content">{{ unit.goodsName + '-' + unit.goodsSkuName}}</span>
            </div>
          </div>
        </div>
        <div class="flex-all-center price-container" :style="{height: item.orderItemList.length*95 + 'px'}">
          <div class="flex-column-center" style="font-size: 12px">
            <span style="color: #9598a2">{{ '总额：￥' + item.orderTotalPrice }}</span>
            <span v-if="item.payPrice"
                  style="margin: 10px 0;color: #9598a2">{{ '已支付：￥' + item.orderPayPrice }}</span>
            <span v-if="item.payPrice">{{ '还需支付：￥' + (item.orderTotalPrice - item.orderPayPrice) }}</span>
          </div>
        </div>
        <div class="flex-all-center price-container" :style="{height: item.orderItemList.length*95 + 'px'}">
          <div class="flex-column-center font-mini">
            <span style="color: #9598a2;">{{ Constant.orderStatusMap[item.orderStatus] }}</span>
            <span class="theme-hover" style="margin-top: 10px" @click="goOrderInfo(item)">查看详情</span>
          </div>
        </div>
        <div class="flex-all-center">
          <div class="flex-column-center font-mini" style="width: 120px" @click="goStudy">
            <span v-if="item.orderStatus == 'paid'" class="theme-hover">去学习</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {listOrder} from '../../../api/order.js'
import {Constant} from '../../../api/const.js'

const router = useRouter();
const route = useRoute();
const emits = defineEmits(['goOrderInfo'])
const data = reactive({
  activeTabName: 'all',
  intentionalExam: '',
  intentionalExamName: '',
  qrUrl: '',
  orderList: []
});
const initData = () => {
  data.intentionalExam = localStorage.getItem('intentionalExam')
  data.intentionalExamName = localStorage.getItem('intentionalExamName')
  getOrderList()
}

function getOrderList() {
  data.orderList = []
  listOrder({orderStatus: Constant.orderTapMap[data.activeTabName]}, (res) => {
    data.orderList = res.data
  })
}

function clickTabHandle(tab) {
  data.activeTabName = tab.props.name
  getOrderList()
}

function goOrderInfo(item) {
  emits('goOrderInfo', item)
}
const goStudy = () => {
  router.push({ name: 'studyCenter' })
}
onMounted(() => {
  initData()
})

</script>

<style scoped>
.right-container {
  width: 1012px
}

.order-title {
  font-size: 22px;
  height: 69px;
  line-height: 89px;
  font-size: 22px;
  font-weight: 400;
}

.line-style {
  border-bottom: 2px solid #f2f2f2;
}

.table-header {
  margin: 20px 50px;
  background-color: #f5f5f5;
  height: 40px;
  font-size: 14px;
  color: #9598a2;
  text-align: center
}

.order-list-container {
  margin: 20px 50px;
  border: 1px solid #efeff0
}

.order-info-container {
  padding-left: 28px;
  background-color: #f5f5f5;
  height: 31px;
  font-size: 12px;
  color: #9598a2;
  border-bottom: 1px solid #efeff0
}

.course-info-container {
  padding: 20px 30px;
  border-right: 1px solid #efeff0
}

.course-type-content {
  display: flex;
  font-size: 14px;
  color: #04ADDB;
  padding: 0 9px;
  margin-bottom: 10px;
  border: 1px solid #04ADDB;
  border-radius: 24px
}

.course-name-content {
  font-size: 14px;
  color: #171920;
}

.price-container {
  width: 120px;
  border-right: 1px solid #efeff0
}
</style>
